<template>
  <el-dialog
    title="填写表单"
    :visible.sync="dialogFormVisible"
    width="90%"
    v-dialog-drag
    :close-on-click-modal="false"
    :append-to-body="true"
    top="5vh"
    @open="handleDialogOpen"
  >
    <el-tabs v-model="activeTab" type="card" element-loading-text="加载中" v-loading="loading">
      <el-tab-pane label="template1" name="first">
        <div class="table-form-container">
          <TableForm
            ref="tableForm"
            :templateConfig="templateConfig"
            :formConfig="formConfig"
            :formData="formData"
            @change="hangelCellChange"
          ></TableForm>
        </div>
      </el-tab-pane>
      <el-tab-pane label="template2" name="second">
        <div class="table-form-container">
          <TableForm
            ref="tableForm1"
            :templateConfig="templateConfig1"
            :formData="formData1"
          ></TableForm>
        </div>
      </el-tab-pane>
    </el-tabs>

    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import TableForm from "../components/formTemplate";
import { tableConfig } from "./config";
import { getFormField, getFormData, inputFormData } from "@/api/table/index";
import { tableConfig1 , tableConfig2 } from "./templates/config1.js";
export default {
  components: { TableForm },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    form: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      templateConfig: null,
      // 后端的表单字段配置
      formConfig: null,
      formData: null,
      templateConfig1: null,
      formData1: null,
      activeTab: "first",
      loading: false
    };
  },
  computed: {
    dialogFormVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible");
      },
    },
  },
  mounted() {
  },
  methods: {
    handleDialogOpen() {
      this.loading = true
      Promise.all([this.getFormField(), this.getFormData()])
        .then(([res1, res2]) => {
          if (res1.code == 200 && res1.data) {
            this.formConfig = res1.data;
          } else {
            this.formConfig = null;
          }
          if (res2.code == 200 && res2.data?.formData) {
            this.formData = JSON.parse(res2.data.formData);
          } else {
            this.formData = null;
          }
          this.getTemplateConfig();
          this.loading = false
        })
        .catch((err) => {
          this.formConfig = null;
          this.formData = null;
          this.loading = false
        });
        
      this.getTemplateConfig1()
    },
    getTemplateConfig() {
      this.templateConfig = this.deepCopyData(tableConfig);
    },
    getTemplateConfig1() {
      let templateConfig1 = this.deepCopyData(tableConfig1);
      // templateConfig1.config[templateConfig1.config.length - 1].copyValuesRows = 5
      this.templateConfig1 = templateConfig1
    },
    getFormField() {
      const param = {
        id: 1,
      };
      return getFormField(param);
    },
    getFormData() {
      const param = {
        formInstId: this.form.id,
      };
      return getFormData(param);
    },
    close() {
      this.dialogFormVisible = false
      if (this.$refs.tableForm) {
        this.$refs.tableForm.clearForm();
      }
      if (this.$refs.tableForm1) {
        this.$refs.tableForm1.clearForm();
      }
    },
    submit() {
      if (this.$refs.tableForm) {
        const formParam = this.$refs.tableForm.getSubmitFormData();
        console.log(formParam);
        const param = {
          formInstId: this.form.id,
          formData: JSON.stringify(formParam),
        };
        inputFormData(param)
          .then((res) => {
            if (res.code == 200) {
              this.dialogFormVisible = false;
            } else {
              this.msgError(res.msg || "提交失败");
            }
          })
          .catch(() => {
            this.msgError("操作失败");
          });
      }
      if (this.$refs.tableForm1) {
        const formParam1 = this.$refs.tableForm1.getSubmitFormData();
        console.log(formParam1);
      }
    },
    // 例子
    hangelCellChange(cell, value, formData) {
      // if (cell.id == 'cell_7_6' && value == "有") {
      //   formData['${listData[0].outletFanStatus}${listData[1].outletFanStatus}${listData[2].outletFanStatus}'] = "异常"
      // }
    },
  },
};
</script>
<style lang="scss" scoped>
.table-form-container {
  width: 100%;
  height: 56vh;
  padding: 20px 0 0;
}
</style>
